<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="container"></ul>

    <script>
        let ul = document.getElementById('container');
        let total = 10000
        let once = 20
        let page = total / once
        let index = 0
        function render(curTotal, curIndex) {
            if (curTotal <= 0) return;
            let pageCount = Math.min(curTotal, once)
            requestAnimationFrame(() => {
                let fragment = document.createDocumentFragment()
                for (let i = 0; i < pageCount; i++) {
                    let li = document.createElement('li')
                    li.textContent = `Page ${curIndex + 1 + i}`
                    fragment.appendChild(li)
                }
                ul.appendChild(fragment)
                render(curTotal - pageCount, curIndex + 1)
            }, 0)
        }
        render(total, index)
    </script>
</body>

</html>